<template>
  <view
    class="my_box"
    @touchmove="refresh.moveTouchendHandler"
    @touchstart="refresh.startTouchendHandler"
    @touchend="refresh.endTouchendHandler"
  >
    <!-- 顶部状态栏 -->
    <top-navigation-bar :is-fixed="false" :is-toolbar="true">
      <template #left>
        <div></div>
      </template>
      <template #middle>
        <div></div>
      </template>
    </top-navigation-bar>

    <!-- 用户个人信息栏 -->
    <view class="header">
      <!-- 头像 -->
      <image class="avatar" :src="user.avatar" mode="scaleToFill" />
      <!-- 基本信息 -->
      <view class="info" @click="login">
        <view> {{ user.username }} </view>
        <!-- 默认展示的标题 -->
        <view v-if="user.userId == 0" class="subtitle">软星社区，有你相伴</view>
        <!-- 选中的住房编号 -->
        <view v-else class="subtitle" @click="switchRooms">
          <uni-icons
            type="location-filled"
            size="20"
            color="rgb(247, 204, 64)"
          />
          <view style="margin-right: 10rpx"
            >{{ useUserStore().getHouseInfo }}
          </view>
          <uni-icons type="loop" size="18" />
        </view>
      </view>

      <image
        src="https://www.lyzhnb.top/rxls-community/house.svg"
        mode="aspectFill"
        class="logo"
      />
    </view>

    <!-- 基本操作列表 -->
    <list-layout :data="basicList" :size="5" @on-click="toDetail" />

    <!-- 轮播图 -->
    <carousel :list-image="imgList" mode="image" />

    <!-- 主要功能列表 -->
    <list-layout :title="'我的软星'" :data="mainList" @on-click="toDetail" />

    <!-- 便民服务 -->
    <list-layout
      :title="'便民服务'"
      :data="convenienceList"
      @on-click="toDetail"
    />

    <!-- 关于我们 -->
    <list-layout :title="'关于我们'" :data="aboutList" @on-click="toDetail" />
  </view>

  <!-- 下拉刷新 -->
  <pull-down-refresh
    :opacity="refresh.moveBottom.value / 3"
    :enble-anim="refresh.isRefresh.value"
  />

  <!-- 顶部tabBar导航栏 -->
  <tabBar></tabBar>
</template>

<script lang="ts" setup>
import topNavigationBar from '@/components/business/top_navigation_bar/top-navigation-bar.vue'
import { refreshHandler } from '@/components/common/pull_down_refresh'
import carousel from '@/components/layout/carousel/carousel.vue'
import listLayout from '@/components/layout/list_layout/list-layout.vue'
import type { Operation } from '@/config/data/data'
import { onPageScroll } from '@dcloudio/uni-app'
import { ref } from 'vue'
import { useUserStore } from '@/store/user'

//用户信息
const user = useUserStore().userInfo

//轮播图列表
const imgList = ref([
  'https://www.lyzhnb.top/waxl/classify/%E4%BA%BA%E5%A3%B0.jpg',
  'https://www.lyzhnb.top/waxl/classify/%E4%BA%BA%E5%A3%B0.jpg',
  'https://www.lyzhnb.top/waxl/classify/%E4%BA%BA%E5%A3%B0.jpg',
])

//关于我们操作列表
const aboutList = ref<Operation[]>([
  {
    icon: 'https://www.lyzhnb.top/rxls-community/agreements.svg',
    msg: '用户协议',
    path: '/agreement/agreement',
  },
  {
    icon: 'https://www.lyzhnb.top/rxls-community/privacys.svg',
    msg: '隐私政策',
    path: '/privacy/privacy',
  },
  {
    icon: 'https://www.lyzhnb.top/rxls-community/scores.svg',
    msg: '给我评分',
    path: '',
  },
  {
    icon: 'https://www.lyzhnb.top/rxls-community/version.svg',
    msg: 'v4.1.1.0',
    path: '/version/version',
  },
])

//主要操作列表
const mainList = ref<Operation[]>([
  {
    icon: 'https://www.lyzhnb.top/rxls-community/hydropower.svg',
    msg: '水电读数',
    path: '/hydropower/hydropower',
    isLogin: true,
  },
  {
    icon: 'https://www.lyzhnb.top/rxls-community/maintenance.svg',
    msg: '我的维修',
    path: '/maintenance/maintenance',
    isLogin: true,
  },
  {
    icon: 'https://www.lyzhnb.top/rxls-community/promotions.svg',
    msg: '优惠活动',
    path: '/promotions/promotions',
    isLogin: true,
  },
  {
    icon: 'https://www.lyzhnb.top/rxls-community/card_rolls.svg',
    msg: '我的卡卷',
    path: '/card_rolls/card_rolls',
    isLogin: true,
  },
  {
    icon: 'https://www.lyzhnb.top/rxls-community/community_events.svg',
    msg: '社区活动',
    path: '/community_events/community_events',
    isLogin: true,
  },
  {
    icon: 'https://www.lyzhnb.top/rxls-community/comments.svg',
    msg: '居住点评',
    path: '',
    isLogin: true,
  },
  {
    icon: 'https://www.lyzhnb.top/rxls-community/complaints.svg',
    msg: '投诉反馈',
    path: '/feedback/feedback',
    isLogin: true,
  },
])

//便民服务操作列表
const convenienceList = ref<Operation[]>([
  {
    icon: 'https://www.lyzhnb.top/rxls-community/customer.svg',
    msg: '客服热线',
    path: 'phone',
    isLogin: false,
  },
])

//基本操作列表
const basicList = ref<Operation[]>([
  {
    icon: 'https://www.lyzhnb.top/rxls-community/bill.svg',
    msg: '账单',
    path: '/bill/bill',
    isLogin: true,
  },
  {
    icon: 'https://www.lyzhnb.top/rxls-community/contract.svg',
    msg: '合同',
    path: '/contract/contract',
    isLogin: true,
  },

  {
    icon: 'https://www.lyzhnb.top/rxls-community/orders.svg',
    msg: '订单',
    path: '/orders/orders',
    isLogin: true,
  },
  {
    icon: 'https://www.lyzhnb.top/rxls-community/scheduled.svg',
    msg: '预约',
    path: '/booking/booking',
    isLogin: true,
  },
  {
    icon: 'https://www.lyzhnb.top/rxls-community/authorization.svg',
    msg: '授权',
    path: '/empowerment/empowerment',
    isLogin: true,
  },
])

//点击跳转登录
const login = () => {
  if (user.userId == 0) {
    uni.navigateTo({ url: '/subpkg/login/login' })
  }
}

//跳转详情页面
const toDetail = (item: Operation) => {
  if (!item.path) {
    return
  }
  //是否需要登录
  // if (item.isLogin && user.userId == 0) {
  //   uni.showToast({
  //     title: '请先登录',
  //     icon: 'none',
  //     mask: true,
  //   })
  //   return
  // }

  //是否特殊客服热线跳转
  if (item.path == 'phone') {
    uni.makePhoneCall({
      phoneNumber: '4001-111-111',
      success: function () {
        console.log('拨打电话成功！')
      },
      fail: function () {
        console.log('拨打电话失败！')
      },
    })
    return
  }

  //跳转其他页面
  uni.navigateTo({ url: `/subpkg${item.path}` })
}

//切换房间
const switchRooms = () => {
  console.log('房间切换')
}

/**
 * 当前页面滚动距离
 */
const rollDistance = ref(0)

//下拉刷新控制函数
const refresh = refreshHandler(300)

//监听页面滚动
onPageScroll((e: any) => {
  //最大滚动距离不为40
  if (e.scrollTop < 40) {
    rollDistance.value = parseInt(e.scrollTop)
  }
  //如果小于5则进行赋值,标识此时是否可进行下拉刷新
  if (e.scrollTop < 5) {
    refresh.rollDistance.value = parseInt(e.scrollTop)
  }
})
</script>

<style scoped lang="scss">
.my_box {
  width: calc(100% - 60rpx);
  padding: 0 30rpx;
  background-color: $uni-bg-color-grey;
  letter-spacing: 2rpx;

  .operation {
    margin: 40rpx;
    padding: 20rpx;
  }

  .header {
    position: relative;
    display: flex;
    align-items: center;
    height: 180rpx;

    .avatar {
      width: 120rpx;
      height: 120rpx;
      border-radius: 10rpx;
    }

    .info {
      font-size: 40rpx;
      margin-left: 20rpx;
      word-break: break-all;
      z-index: 2;

      .subtitle {
        display: flex;
        align-items: center;
        color: rgb(125, 121, 121);
        font-size: 26rpx;
        margin-top: 20rpx;
      }
    }

    .logo {
      position: absolute;
      right: 0;
      bottom: 0;
      width: 190rpx;
      height: 180rpx;
    }
  }
}
</style>
